<template>
  <div class="about-page">
    <!-- 头部背景图 -->
    <div class="header-section">
      <h1>关于我们</h1>
      <p>我们致力于打造高效、智能、便捷的健身房管理系统，助力行业智能化转型。</p>
    </div>

    <!-- 核心优势 -->
    <div class="advantages-section">
      <h2>核心优势</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" v-for="(item, index) in advantages" :key="index">
          <el-card class="advantage-card">
            <div class="icon-wrapper">
              <el-icon :size="40" :color="item.color">
                <component :is="item.icon" />
              </el-icon>
            </div>
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 公司介绍 -->
    <div class="company-section">
      <h2>公司介绍</h2>
      <p>
        我们是一家专注于健身房管理系统的科技公司，成立于2025年。
        我们的团队由一群热爱健身和技术的专业人士组成，致力于为健身房提供智能化解决方案。
      </p>
    </div>

    <!-- 联系我们 -->
    <div class="contact-section">
      <h2>联系我们</h2>
      <p>如果您有任何问题或合作意向，欢迎随时联系我们。</p>
      <el-button type="primary" @click="handleContact">发送邮件</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  Calendar,
  User,
  DataAnalysis,
  Monitor
} from '@element-plus/icons-vue';

// 核心优势数据
const advantages = ref([
  {
    icon: Calendar,
    title: '智能排课',
    description: '支持多类型课程灵活安排，提升课程管理效率。',
    color: '#409EFF'
  },
  {
    icon: User,
    title: '会员管理',
    description: '一键查看/操作会员信息，简化会员管理流程。',
    color: '#67C23A'
  },
  {
    icon: DataAnalysis,
    title: '数据分析',
    description: '提供精准用户行为分析，助力决策优化。',
    color: '#E6A23C'
  },
  {
    icon: Monitor,
    title: '设备监控',
    description: '实时更新器械状态，确保设备正常运行。',
    color: '#F56C6C'
  }
]);

// 处理联系按钮点击事件
const handleContact = () => {
  window.location.href = 'https://www.baidu.com/?tn=68018901_16_pg';
};
</script>

<style scoped>
.about-page {
  padding: 20px;
  color: #333;
  background-color: #f5f7fa;
}

.header-section {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #409EFF, #67C23A);
  color: white;
  border-radius: 10px;
  margin-bottom: 40px;
}

.header-section h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.header-section p {
  font-size: 18px;
}

.advantages-section {
  margin-bottom: 40px;
}

.advantages-section h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
}

.advantage-card {
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.advantage-card:hover {
  transform: translateY(-10px);
}

.icon-wrapper {
  margin-bottom: 20px;
}

.advantage-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.advantage-card p {
  font-size: 14px;
  color: #666;
}

.company-section {
  padding: 40px 20px;
  background-color: white;
  border-radius: 10px;
  margin-bottom: 40px;
}

.company-section h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
}

.company-section p {
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}

.contact-section {
  text-align: center;
  padding: 40px 20px;
  background-color: white;
  border-radius: 10px;
}

.contact-section h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.contact-section p {
  font-size: 16px;
  margin-bottom: 20px;
}
</style>
